<!DOCTYPE html>
<html>
<head>
	<title>欢迎加入豆瓣</title>
	<meta charset="utf-8">
	<style type="text/css">
		*{
			margin: 0;
		}
		a{
			cursor: pointer;
			font-size: 12px;
			color: rgb(51,102,153);
			text-decoration: none;
		}
		#middle a:hover{
			color: white;
			background-color: rgb(0,51,153);
		}
		#bottom a:hover{
			color: white;
			background-color: rgb(0,51,153);
		}
		p{
			font-size: 12px;
			line-height: 30px;
		}
		input{
			width: 200px;
			height: 25px;
			border: 1px solid rgb(205,205,205);
			border-radius: 3px;
		}
		span{
			font-size: 12px;
		}
		#top{
			width: 950px;
			height: 60px;
			margin: 0 auto 20px;
			padding-top: 30px;
		}
		#middle{
			width: 950px;
			margin: 0 auto;
		}
		#right{
			color: rgb(128,128,128);
			position: relative;
			top: -480px;
			left: 630px;
			width: 340px;
			font-size: 12px;
		}
		#bottom{
			border-top: 1px dashed rgb(205,205,205);
			padding: 10px 0 40px;
			color: rgb(128,128,128);
			width: 950px;
			margin: 0 auto;	
			font-size: 12px;
		}
		#zuihoua{
			float: right;
		}
		#diyiipt{
			font-size: 14px;
			margin: 30px 0 0 30px;
		}
		#diyiipt input{
			margin: 10px;
		}
		#diyiipt>p{
			margin-left: 48px;
			color: rgb(128,128,128);
		}
		#cjd{
			margin-left: 20px;
			font-size: 14px;
		}
		#cjd span{
			font-size: 12px;
			color: rgb(128,128,128);
		}
		#dizhi{
			color: black!important;
		}
		#dieript{
			margin-top: 10px;
			margin-left: 20px;
			font-size: 14px;
		}
		#dieript>div{
			margin-left: 15px;
			line-height: 25px;
			width: 200px;
			height: 25px;
			overflow: hidden;
			display: inline-block;
			border: 1px solid rgb(205,205,205);
			border-radius: 3px;
		}
		#dieript input{
			position: relative;
			top: -30px;
			left: 40px;
			height: 30px;
			border: 1px solid white;
		}
		#sjh{
			position: relative;
			top: -10px;
			font-size: 14px;
			display: inline-block;
		}
		#tishi{
			margin: 5px 0px 0 55px;
			color: rgb(128,128,128);
			line-height: 18px;
		}
		#disanipt{
			margin-top: 20px;
			font-size: 14px;
			margin-left: 20px;
		}
		#dsipt1{
			margin-left: 10px;
			display: inline-block;
		}
		#yzm1{
			width: 100px;
		}
		#yanzhengma{
			margin-left: 5px;
			width: 100px;
			height: 28px;
			background-color: white;
			cursor: pointer;
		}
		#yuedu{
			position: relative;
			top: -2px;
			left: 2px;
			width: 10px;
			height: 10px;
			margin: 80px 0 0 70px;
		}
		#zuihoudiv label{
			cursor: pointer;
			font-size: 12px;
		}
		#zhuce{
			cursor: pointer;
			position: relative;
			top: 24px;
			left: 80px;
			width: 80px;
			height: 32px;
			color: rgb(155,155,155);
			background-color: rgba(225,225,225,0.8);
			font-size: 14px;
			font-weight: bold;
		}
		#tip{
			color: red;
			font-size: 12px;
			position: absolute;
			top: 235px;
			left: 38%;
		}
		#tip2{
			color: red;
			font-size: 12px;
			position: absolute;
			top: 280px;
			left: 38%;
		}
		#tip3{
			color: red;
			font-size: 12px;
			position: absolute;
			top: 390px;
			left: 38%;
		}
	</style>
</head>
<body>
	<div id="top"><a href="../douban.html" target="_blank"><img src=""></a></div>
	<div id="middle">
		<div id="left">
			<h2>欢迎加入豆瓣</h2>
			<div id="diyiipt">
				邮 箱 <input type="text" name=""><br>
				密 码 <input type="password" name="" id="pwd" onblur="panDuan(tip)"><label id="tip"></label><br>
				名 号 <input type="text" value="" name="" id="minghao" onblur="ming(tip2)"><label id="tip2"></label>
				<p>第一印象很重要，起个响亮的名号吧</p>
			</div>
			<p id="cjd">常居地 &nbsp;&nbsp;&nbsp;<span>豆瓣猜你在</span><span id="dizhi">郑州</span>，<span>没猜对？</span><a>手动选择</a></p>
			<div id="dieript">
				<p id="sjh">手机号</p><div>&nbsp; +86 <span style="color: rgb(205,205,205);">|</span><input type="" name="" id="yanzhengshouji"></div><label id="tip3"></label>
				<p id="tishi">用手机接收注册验证码<br>验证的手机号如果没有绑定过帐号，会自动绑定当前帐号</p>
			</div>
			<div id="disanipt">
				验证码 <div id="dsipt1"><input id="yzm1" type="text" name=""><input id="yanzhengma" type="button" value="获取验证码" name="" onclick="shouJi(tip3)"></div>
			</div>
			<div id="zuihoudiv"><input id="yuedu" type="checkbox" name=""><label for="yuedu">&nbsp;&nbsp;我已经认真阅读并同意豆瓣的</label><a href="">《使用协议》</a><label for="yuedu">。</label></div>
			<input id="zhuce" type="button" name="" readonly="" value="注册">
		</div>
		<div id="right">
			<p>>已拥有豆瓣账号？ <a href="denglu.html" target="_blank" class="bgcolor">直接登录</a><br>
			><a href="zhuce.html" target="_blank" class="bgcolor">点击下载豆瓣移动应用</a></p>
		</div>
	</div>
	<div id="bottom"><span>© 2005－2016 douban.com, all rights reserved</span><div id="zuihoua"><a href="">关于豆瓣</a>·<a href="">在豆瓣工作</a>·<a href="">联系我们</a>·<a href="">免责声明</a>·<a href="">帮助中心</a>·<a href="">开发者</a>·<a href="">移动应用</a>·<a href="">豆瓣广告</a></div></div>
</body>
</html>
<script type="text/javascript">
	var	pwd = document.getElementById('pwd');
	var name1 = document.getElementById('minghao');
	var yanZheng = document.getElementById('yzm1');
	var yanShou = document.getElementById('yanzhengshouji');
	var	tipDiv = document.getElementById('tip');
	var	tipDiv2 = document.getElementById('tip2');
	var	tipDiv3 = document.getElementById('tip3');

	function panDuan(){
		if (pwd.value.length == 0) {
			tipDiv.innerHTML = '◄ 密码不能为空';
			tipDiv.style.display = 'block';
		}else{
			tipDiv.style.display = 'none';
		}
	}

	function ming(){
		if (name1.value.length == 0) {
			tipDiv2.innerHTML = '◄ 名号不能为空';
			tipDiv2.style.display = 'block';
		}else{
			tipDiv2.style.display = 'none';
		}
	}

	function shouJi(){
		if (yanShou.value.length == 0) {
			tipDiv3.innerHTML = '请输入正确手机号';
			tipDiv3.style.display = 'block';
		}else{
			tipDiv3.style.display = 'none';
		}
	}
	yanZheng.onblur = function () {
		var tip = document.createElement('p');
		tip.innerText = "◁请输入正确的验证码";
		tip.style = "color:red;position:absolute;font-size:12px;bottom:222px;left:35%;";
		document.body.appendChild(tip);
    }
</script>